import React from "react";
import "./ProjectLog.css";
import Wenan from "./wenan";

const ProjectLog = () => {
  const logItem = {
    avatar: "../../public/dashboard/user1.png",
    name: "张伟成",
    role: "UI/UX 设计师",
    logs: [
      {
        id: 1,
        text: "将思维导图任务的状态更新为进行中",
        icon: "🔄",
        bgColor: "#f0f7ff",
      },
      {
        id: 2,
        text: "添加到任务的文件",
        icon: "📎",
        bgColor: "#fff",
      },
    ],
  };

  return (
    <div className="project-log">
      <h4>项目日志</h4>
      <div className="user-section">
        <img src={logItem.avatar} alt="" className="avatar" />
        <div className="user-info">
          <div className="name" style={{ marginLeft: "50px" }}>
            {logItem.name}
          </div>
          <div
            className="role"
            style={{ marginTop: "30px", marginLeft: "-70px" }}
          >
            {logItem.role}
          </div>
        </div>
      </div>
      <div className="log-list">
        {logItem.logs.map((log) => (
          <div
            key={log.id}
            className="log-item"
            style={{ backgroundColor: log.bgColor }}
          >
            <span className="log-icon">{log.icon}</span>
            <span className="log-text">{log.text}</span>
          </div>
        ))}
      </div>
      <Wenan />
    </div>
  );
};

export default ProjectLog;
